<template>
  <div>
    <el-container>
      <el-header height="100px">
        <el-row type="flex"
                justify="start">
          <el-col :span="1">
            <img class="logo"
                 src="../../../assets/juelogo.png"
                 alt="" />
          </el-col>
          <el-col>
            <el-row>
              <el-col>
                <span class="title"> 绝句</span>
              </el-col>
              <el-col>
                <span class="sub_title"> 文艺青年的句子宝典</span>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <el-row type="flex"
                justify='space-around'>
          <el-col :span="12"
                  :offset="3">
            <p class="left_title">绝句APP</p>
            <div class="subTitle">
              <p class="sub_left_title">海量美句</p>
              <p class="sub_left_title">多个分类</p>
              <p class="sub_left_title">精美主题图片</p>
              <p class="sub_left_title">允许自建收藏夹</p>
            </div>
          </el-col>
          <el-col :span="12">
            <img class="content_img"
                 src="../../../assets/jueGroup.png"
                 alt="" />
          </el-col>
        </el-row>
      </el-main>
      <el-footer height="120px">
        <el-row type="flex"
                justify="start"
                align="middle"
                class="footer_container">
          <el-col :span="20">
            <i class="footer_login"></i>
            <span class="footer_title">
              juejuapp.com All Rights Reserved 绝句
              <el-link class="footer_title"
                       target="_blank"
                       href="https://beian.miit.gov.cn">版权所有 沪ICP备20005641号-2</el-link>
            </span>
          </el-col>
          <el-col :span="4">
            <el-link type="primary"
                     @click="toyinsi">隐私政策</el-link>
          </el-col>
        </el-row>
      </el-footer>
    </el-container>
    <el-dialog title="隐私政策"
               :visible.sync="centerDialogVisible"
               width="50%"
               center>
      <span>{{text}}</span>
      <span slot="footer"
            class="dialog-footer">
        <el-button type="primary"
                   @click="centerDialogVisible = false">已阅读</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { readFileJue } from './../../../untils/tool'
export default {
  data () {
    return {
      centerDialogVisible: false,
      text: ''
    }
  },
  created () {
    readFileJue((data) => {
      this.text = data
    })
  },
  methods: {
    toyinsi () {
      this.centerDialogVisible = true
    }
  }
}
</script>

<style lang="less" scoped>
.el-container {
  height: 100vh;
}
.el-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  text-align: start;
  padding-top: 20px;
  .logo {
    display: inline-block;
    padding: 5px;
    width: 66px;
  }
  .title {
    display: block;
    padding-top: 4px;
    padding-left: 30px;
    font-size: 20px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
  }
  .sub_title {
    display: block;
    padding-left: 30px;
    padding-top: 4px;
    font-size: 16px;
    font-family: PingFangSC-Light, PingFang SC;
    font-weight: 300;
    color: #000000;
  }
}
.el-main {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  .left_title {
    padding-top: 180px;
    height: 50px;
    font-size: 36px;
    font-family: CharterITCTT;
    color: #000000;
    line-height: 43px;
  }
  .content_img {
    margin-top: 60px;
  }
  .content_img1 {
    width: 375px;
  }
  .subTitle {
    padding-top: 100px;
    .sub_left_title {
      font-size: 24px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.5);
    }
  }

  .cartgory {
    text-align: center;
    margin-top: 180px;
    margin-bottom: 160px;
    img {
      display: block;
      width: 64px;
      text-align: center;
      margin: 0 auto;
    }
    .tip {
      display: block;
      height: 40px;
      font-size: 28px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #000000;
      padding: 30px;
    }
    .sub_tip {
      display: block;
      height: 25px;
      font-size: 18px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #000000;
      padding: 40px;
    }
  }
  .about {
    margin: 0 auto;
    margin-top: 100px;
    .about_tip {
      font-size: 18px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333;
      line-height: 38px;
    }
    .about_tip_1 {
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #000000;
      line-height: 38px;
      font-size: 25px;
    }
    .about_tip_2 {
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333;
      line-height: 38px;
      font-size: 18px;
    }
    .about_tip_3 {
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333;
      line-height: 38px;
      font-size: 18px;
    }
  }
  .link {
    margin: 100px 0;
    .about_tip_1 {
      font-size: 26px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #000000;
    }
  }
}

.el-footer {
  background: rgba(0, 0, 0, 0.85);
  .footer_container {
    height: 120px;
    .footer_login {
      display: inline-block;
      vertical-align: middle;
      width: 30px;
      height: 30px;
      margin-top: 16px;
      background: url('../../../assets/icons8-copyright.png') no-repeat;
    }
    .footer_title {
      font-size: 18px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
    }
  }
}
</style>
